<template>
    <div class="demo-collapse">
        <el-collapse accordion>
            <el-collapse-item name="1">
                <template #title>&nbsp;&nbsp;
                    展开查询<el-icon class="header-icon">
                        <info-filled />
                    </el-icon>
                </template>
                <div>
                    <el-row :gutter="20" style="width: 1000px;margin-top: 30px;margin-left: 20px;">
                        <el-col :span="6">
                            <div class="grid-content ep-bg-purple" />
                            需求计划编码 <el-input v-model="form.planningCode" style="width: 320px" />

                        </el-col>
                        <el-col :span="6" style="margin-left: 170px">
                            <div class="grid-content ep-bg-purple" />
                            需求计划名称<el-input v-model="form.planningName" style="width: 320px" />
                        </el-col>

                        <el-col :span="6" style="margin-left: 1000px;">
                            <div class="grid-content ep-bg-purple" />
                            <el-button @click="resetForm()">重置</el-button>
                            <el-button type="primary" style="width: 100px;" @click="getlist()">查询</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse-item>

        </el-collapse>
    </div>
    <div>
        <el-button @click="router.push({ name: 'MaterialPlanningAdd' })">新增物料需求计划</el-button>
        <el-col :span="2">
            <el-upload ref="fileInput" class="avatar-uploader" action="http://localhost:5104/api/Material/AddExcelData"
                :show-file-list="false" :on-success="AddExcelData">
                <el-button
                    style="margin-left: 830px;background-color: #34c38f;color:white;
                    font-size: 15px;border-radius: 4px;border-color: #34c38f ;height: 35px;width: 100px;">生成Excel表格</el-button>
            </el-upload>
        </el-col>

        <el-button @click="getOut()">导出</el-button>

    </div>
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="materialPlanningId" label="序号" />
        <el-table-column prop="planningCode" label="计划编码" />
        <el-table-column prop="planningName" label="计划名称" />
        <el-table-column prop="planningPeole" label="制单人" />
        <el-table-column prop="departmentId" label="制单部门">
            <template v-slot="scope">
                <span v-if="scope.row.departmentId == 1">JAVA组</span>
                <span v-else>JAVA2组</span>
            </template>
        </el-table-column>
        <el-table-column prop="handleTime" label="创建时间">
            <template v-slot="scope">
                {{ scope.row.handleTime.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="handle" label="创建人">
        </el-table-column>
        <el-table-column prop="planningState" label="状态">
            <template v-slot="scope">
                <span v-if="scope.row.planningState == false">新建</span>
                <span v-else>完成</span>
            </template>
        </el-table-column>
        <el-table-column prop="pid" label="审批状态">
            <template v-slot="scope">
                <span v-if="scope.row.planningState == 1">创建</span>
                <span v-else-if="scope.row.planningState == 2">审批</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template v-slot="scope">
                <span type="success" @click="navto(scope.row.materialPlanningId)">编辑</span>
                <span type="danger" @click="del(scope.row.materialPlanningId)">删除</span>
            </template>
        </el-table-column>
    </el-table>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import type { UploadProps } from 'element-plus'
import { writeFile } from 'xlsx'
const apiurls = import.meta.env.VITE_APP_API_URL_ProductionAdd;
const apiurl = import.meta.env.VITE_APP_API_URL_ProductionShow;
const router = useRouter()
const form = reactive({
    planningCode: "",
    planningName: "",
})
//导出
const Out = ref([])
const getOut = () => {
    location.href=apiurl+'/api/ShowMaterial/ExportMaterialPlanning';
}

//导入
const AddExcelData: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    if(response!=null){
        ElMessage.success("导入数据成功")
        getlist()
    }else{
        ElMessage.error("导入数据失败")
    }
}
//重置
const resetForm = () => {
    form.planningCode = '',
        form.planningName = '',
        getlist()
}
//物料/服务下拉框
const inventoryInfo = ref([])
const getinventoryInfo = () => {
    axios.post(apiurl+'/api/ShowMaterial/GetMaterial', {}).then(res => {
        inventoryInfo.value = res.data.data
    })
}
const list = ref([])
const getlist = () => {
    axios.post(apiurl+'/api/ShowMaterial/GetMaterialPlanning', {
        planningCode: form.planningCode,
        planningName: form.planningName,
    }).then(res => {
        list.value = res.data.data
    })
}
//修改
const navto = (materialPlanningId: number) => {
    router.push({
        name: 'MaterialPlanningUpdate',
        query: {
            materialPlanningId: materialPlanningId
        }
    })
}
//删除
const del = (materialPlanningId: any) => {
    ElMessageBox.confirm(
        '确认要删除吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post(apiurls+'/api/Material/DeleteMaterialPlanning', {
                materialPlanningId: materialPlanningId
            }).then(res => {
                if (res.data.code > 0) {
                    ElMessage.error("删除成功")
                    getlist()
                } else {
                    ElMessage.error("删除失败")
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
}
onMounted(() => {
    getinventoryInfo()
    getlist()
})
</script>